<template>
  <div>
    <template v-if="listType == 1">
      <div @click="clickClassId(item.classId,item.classStatus)" class="c-pt24 c-flex-row" :key="index" v-for="(item,index) in liveList">
        <div class="c-ww180 c-maxh120 c-text-hidden c-p">
          <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        </div>
        <div class="c-flex-column c-ml20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb28 c-bd-b1">
          <div>
            <div class="c-fs24 c-text-ellipsis1 c-fc-xblack c-lh34">{{item.name}}</div>
            <div class="c-flex-row c-fs20 c-pt22 c-lh c-lh34 c-justify-sb c-aligni-center" :class="item.classStatus == 1 ? 'c-fc-xlred':item.classStatus == 2 ?'c-fc-xblack':item.classStatus == 3 ?'c-fc-gray':'' ">
              {{item.classStatus==1&&item.classBeginAt?item.classBeginAt+'开课':statusMap[item.classStatus]}}
            </div>
            <div class="c-flex-row c-fs20 c-pt22 c-fc-gray c-lh c-lh34 c-justify-sb c-aligni-center">
              <div>共{{item.detailNum}}节 | 已授{{item.classEndNum}}节课</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div @click="clickClassId(item.classId,item.classStatus)" class="c-bg-white c-pv24 c-ph24 c-br16 c-flex-row c-mb24" :key="index" v-for="(item,index) in liveList">
        <div class="c-ww180 c-maxh120 c-text-hidden c-p c-br12 c-text-hidden">
          <img class="c-w100 imgCloseBig c-br12" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
          <div class="c-fs18 c-hh26 c-lh26 c-pa c-p-b0 c-p-r0 theme-bg c-fc-white c-ph8 c-br-tl12" v-if="(item.classStatus==1&&item.classBeginAt) || (item.classStatus==2) || (item.classStatus==3)">{{item.classStatus==1&&item.classBeginAt?item.classBeginAt+'开课':statusMap[item.classStatus]}}</div>
        </div>
        <div class="c-flex-column c-ml20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
          <div class="c-fs24 c-text-ellipsis1 c-fc-xblack c-lh34">{{item.name}}</div>
          <div class="c-flex-row c-fs20 c-fc-gray c-lh34 c-justify-sb c-aligni-center">
            <div>共{{item.detailNum}}节 | 已授{{item.classEndNum}}节课</div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: "LiveItem",
  props: {
    liveList: {
      type: Array,
      default: () => []
    },
    listType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      statusMap: {
        2: "已开课",
        3: "已过期"
      },
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default"
    };
  },
  methods: {
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickClassId(classId, classStatus) {
      let toPath = `/homePage/privateClass/classDetail?classId=${classId}`;
      if (classStatus == 3) {
        toPath = `/homePage/privateClass/classLiveList?classId=${classId}`;
      }
      this.iosAppRouteChange(toPath);
    },
  }
};
</script>

<style scoped>
.c-pt22{padding-top: 0.55rem;}
.c-lh34{line-height: 0.85rem;}
</style>
